<template>
        <div class="jx-big">
            <div style="overflow:hidden">
                <div class="jx-info">
                    <h3 class="fl">消息通知</h3>
                   <div class="button-style fr" @click="notify">发布通知</div>
                </div>
                <div class='table'>
                    <ul class="title">
                        <li style="width:540px; text-align:center; background:#fafafa">消息名称</li>
                        <li style="width:87px;background:#fafafa">发布时间</li>
                        <li style="width:234px;background:#fafafa">操作</li>
                    </ul>
                    <ul class="title-content" @click='cheek(item)' v-for='(item ,index) in tableData' :key="index" style="position:relative" :class="item.down? 'down-content' : 'top-content'">
                        <li style="width:540px; text-indent:25px" >
                             {{item.content}}
                        </li>
                        <li style="width:87px; text-align:center">{{item.createTime}}</li>
                        <li style="width:234px;text-align:center; position:relative">
                            <span class='handle' @click.stop='repeat(item.id, item.content)'>修改</span>
                            <span class='delete' @click.stop="deletFn(item.id)" >删除</span>
                        </li>
                        <i :class="item.down? 'icon' : 'ico'" class='el-icon-arrow-right' ></i>
                        <div  class='classNamelist' >
                            <span class="className" v-for='(item ,index) in item.classList' :key="index">{{item}}</span>
                        </div>
                    </ul>
                    <ul v-if="tableData.length==0" class="empty">
                         <img src='../../../assets/images/empty.png'/>
                         <p>暂无数据</p>
                    </ul>
                </div>
                 <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="totalCount"
                    style="clear:both"
                 ></el-pagination>
            </div>
            <el-dialog :close-on-click-modal="false" title="发布通知" :visible.sync="dialogFormVisible" width="500px" @close="closeDialog2">
                <el-form ref="form" :model="form" :rules="rules">
                    <el-form-item label="选择班级 ：" prop='class'>
                        <el-select v-model="form.class" multiple placeholder="请选择班级" @change="selectAll(form.class)">
                            <el-option
                            v-for="item in form.classList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="消息内容 ：" prop='content'>
                        <el-input type="textarea" v-model="form.content"  maxlength="80"  @input="dataInput"> </el-input>
                        <p style=" position:absolute;  right: 6px; bottom: 3px; color:#bbbbbb; font-size:12px;">{{form.num}}/80</p>
                    </el-form-item>
                    <el-form-item  style="text-align:center; margin-bottom:0px">
                        <div class="button-style save" @click="save('form')">保&nbsp;&nbsp;存</div>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <el-dialog :close-on-click-modal="false" title="修改内容" :visible.sync="dialogFormVisibles" width="550px" @close="closeDialog">
                <el-form ref="form2" :model="form2" :rules="rules2">
                    <el-form-item label="消息内容 ：" prop='content'>
                        <el-input type="textarea" v-model="form2.content"  maxlength="80"  @input="dataInput2"> </el-input>
                        <p class="fontStyles">{{form2.num}}/80</p>
                    </el-form-item>
                    <el-form-item  style="text-align:center">
                        <div class="button-style save" @click="saveFn('form2')">保 存</div>
                    </el-form-item>
                </el-form>
            </el-dialog>
     </div>


</template>

<script>
    import NotificationNav from '@/components/NotificationNav.vue'
    export default {
        components: {
            NotificationNav
        },
        data () {
            return {
                arr2:[],
                form:{
                    num:80,//剩余字数
                    class:[],
                    oldOptions: [
                        {
                            id: '全选',
                            name: '全选'
                        }
                    ],
                    content:'',
                    //班级下拉
                    classList: [],
                    shareValue:[],

                },
                 form2:{
                  num:80,//剩余字数
                  content:'',
                },
                rules: {
                    class: [
                        { required: true, message: '请选择班级', trigger: 'change' }
                    ],
                    content: [
                        { required: true, message: '请填写消息内容', trigger: 'blur' }
                    ],
                },
                rules2: {
                    content: [
                        { required: true, message: '请填写消息内容', trigger: 'blur' }
                    ],
                },
                dialogFormVisible:false,
                dialogFormVisibles:false,
                currentPage: 1,
                pagesize: 10,
                totalCount: 1000,
                tableData: []
                // tableData: [{
                //     id: '12987122',
                //     down:false,
                //     name: '王小0虎',
                //     amount1: '234',
                //     amount2: '3.2',
                //     ClassList:[
                //         { name:'大数据发班据发班级'},
                //         { name:'大数据发班据发班级'},
                //         { name:'大数据班级'},
                //         { name:'大数据发班据级'},
                //          { name:'大数据发班据发班级'},
                //         { name:'大数据发班据发班级'},
                //         { name:'大数据班级'},
                //         { name:'大数据发班据级'},
                //     ],
                //     count:'代码的关键点在于border-collapse:collapse; 和 border:solid 1px Black;。对于padding的定义大家都比较熟悉了，这里主要讲一下的是border-collapse中的collapse和separate值，定义为collapse时，他们的边框会重叠在一起，定义为separate时单元格边框之间会有间隙。不定义时默认为separate。 separate情况下的效 '
                //     },
                //     {
                //     id: '12987122',
                //     down:true,
                //     name: '王小0虎',
                //     amount1: '234',
                //      ClassList:[
                //         { name:'大数据发班据发班级'},
                //         { name:'大数据发班据发班级'},
                //     ],
                //     amount2: '3.2',
                //     count:'大数据发班据发班级大数据发班据发班级大数据发班据发班级大数据发班据发班级'
                //     }
                // ]
            }
        },
        created () {
            this.init()
        },
        methods: {
            init(){
                let self = this
                self.$http.get('/tes/message/teacher?pageNum='+self.currentPage+'&pagesize='+self.pagesize).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                       self.tableData = res.data.content
                       for(let i=0; i<self.tableData.length;i++){
                          this.$set(self.tableData[i], 'down', false)
                          this.$set(self.tableData[i], 'classList', self.tableData[i].classes.split(','))
                          this.$delete(self.tableData[i], 'classes')
                       }
                       self.totalCount = res.data.total
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //全选
            selectAll(val){
                let self = this
                let allValues = []
                //保留所有值
                for (let item of self.form.classList) {
                    allValues.push(item.id)
                }
                 // 用来储存上一次的值，可以进行对比
                const oldVal = self.form.oldOptions.length === 1 ? [] : self.form.oldOptions[1]
                // 若是全部选择
                if (val.includes('全选')) self.form.class = allValues
                // 取消全部选中  上次有 当前没有 表示取消全选
                if (oldVal.includes('全选') && !val.includes('全选'))  self.form.class = []
                // 新老数据都有全部选中
                if (oldVal.includes('全选') && val.includes('全选')) {
                    const index = val.indexOf('全选')
                    val.splice(index, 1) // 排除全选选项
                    self.form.class = val
                }
                 //储存当前最后的结果 作为下次的老数据
                self.form.oldOptions[1] = self.form.class
                
            },
            classList(){
                let self = this
                self.$http.get('/tes/message/teacher/class-list').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.form.classList = res.data.reduce((currentList,item)=>{
                            return [
                                ...currentList,
                                {
                                    id:item.id,
                                    name:item.name
                                }
                            ]
                        },[])
                        self.form.classList.unshift({
                             id:'全选',
                             name: '全选'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
             //分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.init()
            },
            //发布通知
            notify(){
                this.classList()
                this.dialogTitle='发布通知'
                this.dialogFormVisible=true
                this.form.content=''
            },
            //修改
            repeat(id,content){
              // console.log('修改消息')
               this.dialogFormVisibles=true
               this.dialogTitle='修改通知'
               this.form2.content=content
               this.editId = id
               this.form2.num = 80-content.length
            },
            //删除消息
            deletFn(id){
               let self = this;
               self.$confirm('是否删除选中?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.$http.delete('/tes/message/teacher/message/'+id ).then((response) => {
						let res = response.data;
						if(res.code == '200'){
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            self.currentPage = 1
							self.init()
						}else{
                            self.$message.error(res.message)
                        }
					},(err) => {
						console.log('err');
					})
				}).catch(() => {
				});
            },
            //关闭弹窗
             closeDialog(){
                 this.$refs.form2.resetFields()
             },
             closeDialog2(){
                this.$nextTick(()=>{
                     this.$refs.form.resetFields()
                     this.form.num = 0
                })

            },
            //展开
            cheek(item){
              item.down =!item.down
            },
            //修改保存
            saveFn(form2){
                let self = this
                self.$refs[form2].validate((valid) => {
                    if (valid) {
                        self.$http.put('/tes/message/teacher/message/'+self.editId,{
                            content:this.form2.content,
                            // id:self.editId
                        }).then((response) => {
                        let res = response.data
                        if(res.code == '200') {
                            self.$message({
                                message: '修改成功',
                                type: 'success'
                            })
                        this.dialogFormVisibles=false
                        this.init()
                        }else{
                            self.$message.error(res.message)
                        }
                    })

                  }
               })
            },
            //保存
            save(form){
                let self = this
                let idList=[]
                self.$refs[form].validate((valid) => {
                    if (valid) {
                        //点击时全选
                        if(self.form.class.includes('全选')){
                            //遍历所有id
                            for(let i =0; i<self.form.classList.length;i++){
                                if(self.form.classList[i].id!='全选'){
                                    idList.push(self.form.classList[i].id)
                                }
                            }
                        }else{
                            //点击不是全选
                            idList=self.form.class
                        }
                        self.$http.post('/tes/message/teacher/message',{
                            content:this.form.content,
                            classIdList:idList  //原来传的是self.form.class
                        }).then((response) => {
                        let res = response.data
                        if(res.code == '200') {
                            self.$message({
                                message: '添加成功',
                                type: 'success'
                            })
                        this.dialogFormVisible=false
                        this.init()
                        }else{
                            self.$message.error(res.message)
                        }
                    })

                  }
               })

            },
            //字数
            dataInput(){
                var txtVal = this.form.content.length;
                this.form.num = 80 - txtVal
            },
             //字数
            dataInput2(){
                var txtVal = this.form2.content.length;
                this.form2.num = 80 - txtVal
            },

        },
    }
</script>
<style scoped>
    .el-form>>>.el-form-item__content{
        height: auto;
    }
    .el-form>>>.el-textarea__inner{
        resize: none
    }
   .el-textarea{
       width: 68%;
       height: 140px;
   }
   .el-select>>>.el-input__inner{
       width: 300px;
   }
   .el-form-item>>>.el-form-item__error{
       left: 108px;
   }
   .fontStyles{
       position: absolute;
       right: 27px;
       bottom: 3px;
       font-size: 12px;
       color: rgb(187, 187, 187)
   }
</style>

<style lang="scss" scoped>
@import "./../../../styles/layout/color_variables";
.jx-big {
    padding-left: 30px;
    padding-top: 20px;
    padding-right: 19px;
        .jx-info{
            overflow: hidden;
            .jx-info>h3{
                height: 32px;
                line-height: 32px;
                font-size: $fs16
            }
        }
        .table{
            clear: both;
            margin: 40px 0;
            width: 100%;
              .title>li{
                float: left;
                border-bottom:1px solid #e8e8e8;
                text-align:center;
                height: 45px;
                line-height:45px;
                color:#474747;
                }
            .title-content{
                clear: both;
                float: left;
                border-bottom:1px solid #e8e8e8;
                height: 30px;
            }

            .title-content>li{
                float: left;
                line-height:30px;
                cursor: pointer;
            }
            .top-content{
                height: 27px;
                overflow: hidden;
                transition: height .3s;
                line-height:28px;
                padding:10px 0;
            }
            .down-content{
                height: auto;
                transition: height .3s;
                line-height:28px;
                padding: 10px 0;
            }
            .icon{
                position:absolute;
                right:33px;
                transform:rotate(90deg);
                transition: transform .3s;
                line-height:30px;
                display:inline-block;
                cursor: pointer;
            }
            .ico{
                position:absolute;
                right:33px;
                line-height:30px;
                display:inline-block;
                transform:rotate(0deg);
                transition: transform .3s;
                cursor: pointer;
            }
            .handle{
                position: absolute;
                left: 50px;
                z-index: 8;
                display: inline-block;
                width: 50px;
                height: 30px;
                color: $btn-blue;
                cursor: pointer;
                }
            .delete{
                position: absolute;
                z-index: 8;
                display: inline-block;
                width: 50px;
                height: 30px;
                color: $btn-blue;
                cursor: pointer;
            }
             .empty{
                padding:100px 0;
                text-align:center;
                p{
                    padding:15px 0;
                    color: #666
                }
            }
            .classNamelist{
                clear: both;
                padding-top:10px;
                width: 835px;
                padding: 0 20px;
                 .className{
                    border-radius: 5px;
                    border: 1px solid #727272;
                    margin-right: 10px;
                    padding: 0px 8px;
                    margin-bottom: 7px;
                    display: inline-block;
                    font-size: 12px
                }
            }

        }
}
</style>
